<template>
  <div class="app-container">
<!--    头部搜索 开始-->
    <el-card class="box-card" style="margin-bottom: 10px;" >
    <div class="filter-container">
      <el-form ref="queryForm" :model="listQuery" :inline="true" label-width="68px">
        <el-form-item label="业主名称" prop="name">
          <el-input
            v-model="listQuery.name"
            placeholder="(选填)请输入业主名称"
            clearable
            size="small"
            style="width:180px"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="link">
          <el-input
            v-model="listQuery.link"
            placeholder="(选填)请输入业主手机号"
            clearable
            size="small"
            style="width:200px"
          />
        </el-form-item>
        <el-form-item label="身份证" prop="idCard" >
          <el-input
            v-model="listQuery.idCard"
            placeholder="(选填)请输入业主身份证"
            clearable
            size="small"
            style="width:200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    </el-card>
<!--    头部搜索 end-->

<!--    头部按钮 开始-->
    <el-card class="box-card" style="margin-bottom: 10px;" >
    <el-row :gutter="10" style="margin-bottom: 8px;">
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-plus" size="mini" @click="openAddOwnerPop">新增业主</el-button>
        <el-dialog
          title="添加业主"
          :visible.sync="addOwnerPop"
          width="30%">
          <AddOwner :OwnerPo="OwnerPo"/>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addOwnerList">确 定</el-button>
          </span>
        </el-dialog>
      </el-col>
      <el-col :span="1.5" style="float: right">
        <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
          显示身份证
        </el-checkbox>
      </el-col>
    </el-row>
    <el-divider></el-divider>
<!--    头部按钮 end-->

<!--    数据表格 开始-->
    <el-table :key="tableKey" :data="list"
              fit highlight-current-row style="width: 100%;" :header-cell-style="{
                'color': '#3D4144',
              }">
      <el-table-column label="业主编号" prop="id" align="center" width="150" >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="业主名称"align="center" >
        <template slot-scope="scope">
          <span>{{ scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center" >
        <template slot-scope="scope">
          <span>{{ scope.row.link }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="80px" align="center" >
        <template slot-scope="scope">
          <el-tag :type="scope.row.sex === 1 ? '' : 'warning'" disable-transitions>{{scope.row.sex===1 ? '男':'女'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="年龄" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.age }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="showReviewer" label="身份证号码" width="200px" align="center">
        <template slot-scope="scope">
          <span style="color:red;">{{ scope.row.idCard }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" >
        <template slot-scope="scope">
          <span >{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" class-name="small-padding fixed-width" width="140" fixed="right">
        <template slot-scope="scope">
          <el-popover placement="bottom" trigger="click">
            <el-row >
              <el-col :span="11">
                <el-button type="text" size="mini" @click="openUpdateOwnerPop(scope.row.id)">修改业主</el-button>
              </el-col>

              <el-col :span="11"  style="float: right">
                <el-button type="text" size="mini" @click="deleteOwnerById(scope.row.id )">删除业主</el-button>
              </el-col>
            </el-row>

            <el-row >
              <el-col :span="11">
                <router-link :to="{'path':'/owner/homeCheck/' + scope.row.id}" class="el-button el-button--text el-button--small" >
                  入住房屋
                </router-link>
              </el-col>
              <el-col :span="11" style="float: right">
                <router-link :to="{'path':'/owner/removeRoom/' + scope.row.id+'/'+0}" class="el-button el-button--text el-button--small" >
                  房屋解绑
                </router-link>
              </el-col>
            </el-row>
            <el-button type="text" slot="reference" size="mini" icon="el-icon-plus">变更</el-button>
          </el-popover>

          <router-link :to="{'path':'/owner/ownerDetails/' + scope.row.id+'/'+1}" class="el-button el-button--text el-button--small" >
            详情
          </router-link>

        </template>
      </el-table-column>
    </el-table>

<!--    数据表格 end-->
    <el-dialog
      title="修改业主"
      :visible.sync="updateOwnerPop"
      width="30%">
      <AddOwner :OwnerPo="OwnerPo"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateOwnerPop = false">取 消</el-button>
        <el-button type="primary" @click="updateOwnerById">确 定</el-button>
      </span>
    </el-dialog>

<!--    分页插件-->
    <el-pagination
      v-show="total > 0"
      :current-page="listQuery.pageNum"
      :page-size="listQuery.pageSize"
      layout="total,sizes,prev,pager,next,jumper"
      :page-sizes="[5,10,20,30]"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </el-card>
<!--    分页插件 end-->
  </div>
</template>

<script>
import { queryOwnerList,addOwner,deleteOwner,updateOwner,getOwnerById,getOwnerRoomList} from '@/api/village/owner'
import AddOwner from './page/addOwner'

export default {
  name: 'ComplexTable',
  components:{AddOwner},
  data() {
    return {
      tableKey: 0,
      // 表格数据
      list: null,
      total: 0,
      // 查询条件
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        link: undefined,
        idCard: undefined,
      },
      // 是否显示身份证信息
      showReviewer: false,
      // 打开新增用户弹窗
      addOwnerPop:false,
      // 打开修改弹窗
      updateOwnerPop:false,
      // 新增或者修改数据
      OwnerPo:{
        id:undefined,
        name:undefined,
        sex:undefined,
        age:undefined,
        avatar:'',
        link:undefined,
        remark:undefined,
        idCard:undefined
      },

    }
  },
  created() {
    this.getList()
  },
  methods: {
    /**
     * 初始化数据
     */
    getList() {
      queryOwnerList(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
      })
    },

    /**
     * 修改业主信息
     */
    updateOwnerById(){
      const owner = {
        id:this.OwnerPo.id,
        name:this.OwnerPo.name,
        sex:this.OwnerPo.sex,
        age:this.OwnerPo.age,
        avatar:this.OwnerPo.avatar,
        link:this.OwnerPo.link,
        remark:this.OwnerPo.remark,
        idCard:this.OwnerPo.idCard
      }
      updateOwner(owner).then(res => {
        if (res.data){
          this.updateOwnerPop = false
          this.OwnerPo={
            name:undefined,
            sex:undefined,
            age:undefined,
            avatar:'',
            link:undefined,
            remark:undefined,
            idCard:undefined
          }
          this.getList()
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    /***
     * 打开修改业主信息
     */
    openUpdateOwnerPop(ownerId){
      getOwnerById(ownerId).then(res => {
        this.OwnerPo = res.data
        this.updateOwnerPop = true
      })
    },

    /**
     * 删除业主
     */
    deleteOwnerById(ownerId){
      this.$confirm('确定要删除此业主?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除业主
        deleteOwner(ownerId).then(res => {
          if(res.data){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getList()
          }else{
            this.$message.error(res.msg)
          }
          return false;
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },


    /**
     *  新增业主
     */
    addOwnerList(){
      const owner = {
        name:this.OwnerPo.name,
        sex:this.OwnerPo.sex,
        age:this.OwnerPo.age,
        file:this.OwnerPo.avatar,
        link:this.OwnerPo.link,
        remark:this.OwnerPo.remark,
        idCard:this.OwnerPo.idCard
      }
      addOwner(owner).then(res => {
        if (res.data){
          this.addOwnerPop = false
          this.OwnerPo={
            name:undefined,
            sex:undefined,
            age:undefined,
            avatar:'',
            link:undefined,
            remark:undefined,
            idCard:undefined
          }
          this.getList()
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        }else{
          this.$message.error(res.msg)
        }
        return false;
      })
    },

    /**
     *  打开新增业主弹窗
     */
    openAddOwnerPop(){
      this.OwnerPo={
        name:undefined,
        sex:undefined,
        age:undefined,
        avatar:'',
        link:undefined,
        remark:undefined,
        idCard:undefined
      }
      this.addOwnerPop = true;
    },

    /**
     * 查询按钮
     */
    handleQuery(){
      this.getList()
    },

    /**
     * 模糊查询
     */
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    /**
     * 页面大小发生变化
     * @param data
     */
    handleSizeChange(val){
      this.listQuery.pageSize = val
      this.getList();
    },
    /**
     * 页面页数发生变化
     * @param val
     */
    handleCurrentChange(val){
      this.listQuery.pageNum = val
      this.getList();
    },

    /**
     *  是否确定管理弹窗
     */
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }

  },
  watch:{
    'listQuery.name':{
      handler(){
        this.listQuery.pageNum = 1
        this.getList()
      },
      deep:true
    },
    'listQuery.link':{
      handler(){
        this.listQuery.pageNum = 1
        this.getList()
      },
      deep:true
    },
    'listQuery.idCard':{
      handler(){
        this.listQuery.pageNum = 1
        this.getList()
      },
      deep:true
    }
  }
}
</script>
